<template>
    <div class="category-container">
        <el-card class="category-card">
            <template #header>
                <div class="card-header">
                    <span>公告管理</span>
                    <span></span>

                    <el-button type="primary" size="small" @click="handleAdd">新增公告</el-button>
                </div>
            </template>

            <el-table :data="announcementList" border style="width: 100%">
                 <el-table-column label="序号" width="80">
                    <template #default="scope">
                        {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="公告名称"/>
                <el-table-column label="描述">
                    <template #default="scope">

                        <el-button size="small" @click="showContentDetails(scope.row.content)">查看内容</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="is_active" label="是否启用"
                                 :formatter="(row, column, cellValue) => cellValue ? '是' : '否'"/>
                <el-table-column prop="is_pinned" label="是否置顶"
                                 :formatter="(row, column, cellValue) => cellValue ? '是' : '否'"/>
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                class="pagination"
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="fetchCategoryData"
                @current-change="fetchCategoryData"
            />
        </el-card>

        <!-- 新增/编辑对话框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
            <el-form :model="form" label-width="80px">
                <el-form-item label="公告名称">
                    <el-input v-model="form.title" placeholder="请输入公告名称"/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.content" type="textarea" :rows="3" placeholder="请输入描述"/>
                </el-form-item>
                <!-- 是否启用 -->
                <el-form-item label="是否启用">
                    <el-radio-group v-model="form.is_active">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- 是否置顶 -->
                <el-form-item label="是否置顶">
                    <el-radio-group v-model="form.is_pinned">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 查看内容模态框 -->
        <el-dialog v-model="contentDialogVisible" title="公告内容" width="50%">
            <span>{{ contentToView }}</span>
            <template #footer>
                <el-button @click="contentDialogVisible = false">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import requestUtil from '@/util/request.js'
import {getAnnouncements} from '@/api/AnnouncementsApi/Announcements'
// 表格数据
const announcementList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 查看内容模态框
const contentDialogVisible = ref(false)
const contentToView = ref('')

// 查看内容
const showContentDetails = (content) => {
    contentToView.value = content
    contentDialogVisible.value = true
}
// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({
    announcement_id: null,
    title: '',
    content: '',
    is_active: true,
    is_pinned: false
})

// 获取类别数据
const fetchCategoryData = async () => {
    try {
        const {list, total: totalCount} = await getAnnouncements(currentPage.value, pageSize.value)

        announcementList.value = list

        total.value = totalCount
    } catch (error) {
        console.error('获取类别数据失败:', error)
    }
}

// 新增类别
const handleAdd = () => {
    dialogTitle.value = '新增公告'
    form.value = {

        title: '',
        content: '',
        is_active: true,
        is_pinned: false
    }
    dialogVisible.value = true
}

// 编辑类别
const handleEdit = (row) => {

    dialogTitle.value = '编辑公告'
    form.value = {...row}

    dialogVisible.value = true
}

// 删除类别
const handleDelete = (row) => {
    ElMessageBox.confirm(`确定要删除【${row.title}】吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            form.value = {...row}
            await requestUtil.del('/announcement/delete',form.value)
            ElMessage.success('删除成功')
            await fetchCategoryData()
        } catch (error) {
            console.error('删除失败:', error)
        }
    }).catch(() => {
    })
}

// 提交表单
const handleSubmit = async () => {
    try {
        if (form.value.announcement_id) {
            // 编辑
            await requestUtil.put('/announcement/update', form.value)
            ElMessage.success('更新成功')
        } else {
            // 新增
            await requestUtil.post('/announcement/add', form.value)
            ElMessage.success('新增成功')
        }
        dialogVisible.value = false
        await fetchCategoryData()
    } catch (error) {
        console.error('操作失败:', error)
    }
}

onMounted(() => {
    fetchCategoryData()
})
</script>

<style lang="scss" scoped>
.table-content {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    margin-right: 10px;
}

.category-container {
    padding: 20px 0;

    .category-card {
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
        }
    }

    .pagination {
        margin-top: 20px;
        justify-content: flex-end;
    }
}
</style>
